<script setup lang="ts">
import { reactive, ref, onMounted, watch } from "vue";
import type { FormInstance, FormRules, UploadProps } from "element-plus";
import { Search, UploadFilled } from "@element-plus/icons-vue";
import { router } from "@/router";
import {
  get_compliance_asset_group,
  compliance_asset_group,
} from "@/api/asset";
import { message } from "@/utils/message";
defineOptions({
  name: "OtherBasic",
});

import GatherSix from "../../gather/gathersix.vue";
import dayjs from "dayjs";
import { fr } from "element-plus/es/locale";
const formInline = reactive({
  policy_name: "",
  taskName: "",
  creater: "",
  task_id: "",
  ipscope: "",
  createTime: "",
  asset_name: "",
  exposure_asset_ip: "",
  open_port: "",
});

const formAddHardware = reactive({
  group_name: "",
});

const addHardwareFormRef = ref<FormInstance>();

const hardwareRules = reactive<FormRules>({
  group_name: [
    { required: true, message: "请输入资产组名称", trigger: "blur" },
  ],
});

const showAddHardwareDialog = ref(false);

const tableData = ref([
  {
    group_name: "基表1",
  },
]);

const currentPage = ref(1); // 当前页码
const pageSize = ref(20); // 每页显示的条数
const totalTabalData = ref(0); // 总条数

//自定义资产组弹框
const showCustomerAssetDialog = ref(false);
const uploadError = (e) => {
  console.log("上传错误：", e);
};

const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  // imageUrl.value = URL.createObjectURL(uploadFile.raw!);
};

const getComplianceAssetGroup = () => {
  get_compliance_asset_group({
    group_name: "",
    page: currentPage.value,
    per_page: pageSize.value,
  })
    .then((result) => {
      if (result.code === 2000) {
        tableData.value = result.data;
        totalTabalData.value = result.total;
      }
    })
    .catch((err) => {});
};

const createComplianceAsset = async (formEl: FormInstance) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    if (valid) {
      compliance_asset_group({
        group_name: formAddHardware.group_name,
      })
        .then((result) => {
          if (result.code === 2000) {
            message("新建成功", { type: "success" });
            showAddHardwareDialog.value = false;
          } else {
            message(result.message, { type: "error" });
          }
        })
        .catch((err) => {});
    }
  });
};

//去基表详情
const gotoAssetDetail = (rowdata) => {
  const id = rowdata.id;
  router.push("/assetmg/basicdetail?tp=" + id);
};

onMounted(() => {
  getComplianceAssetGroup();
});
</script>

<template>
  <div>
    <div class="">
      <el-card shadow="never">
        <template #header>
          <div class="card-header">
            <el-form
              :inline="true"
              :model="formInline"
              size="small"
              class="demo-form-inline"
              @submit.prevent
            >
              <el-form-item>
                <el-button type="primary" @click="showAddHardwareDialog = true"
                  >新建基表</el-button
                >
              </el-form-item>

              <el-form-item label="资产名称" v-if="false">
                <el-input
                  v-model="formInline.asset_name"
                  placeholder="资产名称"
                  maxlength="30"
                  clearable
                  @keydown.enter="getComplianceAssetGroup"
                >
                  <template #append>
                    <el-button
                      :icon="Search"
                      @click="getComplianceAssetGroup"
                    />
                  </template>
                </el-input>
              </el-form-item>
            </el-form>
          </div>
        </template>

        <el-table :data="tableData" style="width: 100%">
          <el-table-column type="selection" width="55" />
          <el-table-column type="index" width="60" label="序号" />
          <el-table-column label="资产组名称" prop="group_name">
            <template #default="rowscope">
              <el-link
                type="primary"
                :underline="true"
                @click="gotoAssetDetail(rowscope.row)"
                >{{ rowscope.row.group_name }}
              </el-link>
            </template>
          </el-table-column>
          <el-table-column label="创建人" prop="create_user" />

          <el-table-column label="创建时间" prop="create_time" />

          <el-table-column
            label="操作"
            width="200px"
            fixed="right"
            v-if="false"
          >
            <template #default="rowscope">
              <el-button size="small" type="success"> 暂停</el-button>
              <el-button size="small" class="el-btn-zese"> 恢复</el-button>
              <!-- type="primary" -->
              <el-button size="small" type="warning"> 删除</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-pagination
          @current-change="getComplianceAssetGroup"
          v-model:current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          v-model:page-size="pageSize"
          @size-change="getComplianceAssetGroup"
          layout="total, sizes, prev, pager,next"
          :total="totalTabalData"
          background
        />
      </el-card>

      <el-dialog
        v-model="showAddHardwareDialog"
        :show-close="true"
        destroy-on-close
        width="500px"
      >
        <template #header="{ titleId, titleClass }">
          <div class="my-header">
            <h4 :id="titleId" :class="titleClass">新建基表记录</h4>
          </div>
        </template>

        <el-form
          :inline="false"
          :model="formAddHardware"
          :rules="hardwareRules"
          ref="addHardwareFormRef"
          class="demo-form-inline"
        >
          <el-form-item
            label="资产组名称"
            label-width="100px"
            prop="group_name"
          >
            <el-input
              v-model="formAddHardware.group_name"
              placeholder="资产组名称"
              prop
              clearable
              maxlength="30"
            />
          </el-form-item>
        </el-form>

        <template #footer>
          <div>
            <el-button @click="showAddHardwareDialog = false"> 取消 </el-button>
            <el-button
              type="primary"
              @click="createComplianceAsset(addHardwareFormRef)"
            >
              <!-- <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon> -->
              确认
            </el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<style lang="scss" scoped>
:deep(.el-card__header) {
}

:deep(.el-pagination) {
  justify-content: right;
  margin-top: 10px;
  margin-right: 30px;
}
.gather-container {
  display: block;
  margin-bottom: 10px;
}

.min-w-input {
  width: 300px;
}

.el-btn-zese {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.el-btn-zese.is-disabled,
.el-btn-zese.is-disabled:focus,
.el-btn-zese.is-disabled:hover {
  background: #722ed1;
  color: white;
  border-color: #722ed1;
}

.ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>
